{% block sw_sales_channel_product_assignment_categories %}
<div class="sw-sales-channel-product-assignment-categories">
    {% block sw_sales_channel_product_assignment_categories_info %}
    <mt-banner ref="alert">
        {{ $tc('sw-sales-channel.detail.productAssignmentModal.categories.textInfo') }}
    </mt-banner>
    {% endblock %}

    {% block sw_sales_channel_product_assignment_categories_content %}
    <mt-card
        :is-loading="!isComponentReady || isProductLoading"
        position-identifier="sw-sales-channel-product-assignment-categories"
    >
        <div :style="containerStyle">
            {% block sw_sales_channel_products_assignment_single_products_secondary %}
            <sw-card-section
                ref="cardSectionSecondary"
                secondary
                divider="bottom"
            >
                {% block sw_sales_channel_product_assignment_categories_search_field %}
                <sw-simple-search-field
                    :value="searchTerm"
                    variant="form"
                    size="small"
                    :placeholder="$tc('sw-sales-channel.detail.productAssignmentModal.categories.textSearch')"
                    @search-term-change="onSearchTermChange"
                />
                {% endblock %}
            </sw-card-section>
            {% endblock %}

            {% block sw_sales_channel_product_assignment_categories_tree %}
            {% block sw_sales_channel_product_assignment_categories_tree_result %}
            <sw-tree
                v-if="searchTerm.length <= 0 && categories.length > 0"
                ref="swTree"
                after-id-property="afterCategoryId"
                :items="categories"
                :sortable="false"
                @get-tree-items="getTreeItems"
            >
                {% block sw_sales_channel_product_assignment_categories_tree_headline %}
                <template #headline>
                    <span></span>
                </template>
                {% endblock %}

                {% block sw_sales_channel_product_assignment_categories_tree_search %}
                <template #search>
                    <span></span>
                </template>
                {% endblock %}

                {% block sw_sales_channel_product_assignment_categories_tree_items %}
                <template
                    #items="{
                        treeItems,
                        draggedItem,
                        translationContext
                    }"
                >
                    {% block ssw_sales_channel_product_assignment_categories_tree_item %}
                    <sw-tree-item
                        v-for="item in treeItems"
                        :key="item.id"
                        :item="item"
                        :translation-context="translationContext"
                        :dragged-item="draggedItem"
                        :active-parent-ids="selectedCategoriesPathIds"
                        :active-item-ids="selectedCategoriesItemsIds"
                        :sortable="false"
                        :mark-inactive="true"
                        @check-item="onCheckItem"
                    >

                        {% block sw_sales_channel_product_assignment_categories_tree_item_actions %}
                        <template #actions>
                            <span></span>
                        </template>
                        {% endblock %}

                    </sw-tree-item>
                    {% endblock %}
                </template>
                {% endblock %}
            </sw-tree>
            {% endblock %}

            {% block sw_sales_channel_product_assignment_categories_search_results %}
            <ul
                v-else-if="searchResult.length > 0 && searchTerm.length > 0"
                class="sw-sales-channel-product-assignment-categories__search-results"
            >

                {% block sw_sales_channel_product_assignment_categories_search_results_item %}
                <li
                    v-for="item in searchResult"
                    :key="item.id"
                    class="sw-sales-channel-product-assignment-categories__search-result"
                    role="option"
                    tabindex="0"
                    :aria-selected="isSearchItemChecked(item.id)"
                    @click.stop="onCheckSearchItem(item)"
                    @keydown.enter="onCheckSearchItem(item)"
                >

                    {% block sw_sales_channel_product_assignment_categories_search_results_item_checkbox %}
                    <mt-checkbox
                        class="sw-sales-channel-product-assignment-categories__search-results-checkbox"
                        :checked="isSearchItemChecked(item.id)"
                    />
                    {% endblock %}

                    {% block sw_sales_channel_product_assignment_categories_search_results_item_folder %}
                    <div
                        v-if="item.childCount > 0"
                        class="sw-sales-channel-product-assignment-categories__search-results-icon"
                    >
                        {% block sw_sales_channel_product_assignment_categories_search_results_item_folder_icon %}
                        <mt-icon
                            name="regular-folder"
                            size="16px"
                        />
                        {% endblock %}
                    </div>
                    {% endblock %}

                    {% block sw_category_tree_field_input_results_search_results_item_endpoint %}
                    <div
                        v-else
                        class="sw-sales-channel-product-assignment-categories__search-results-icon"
                    >
                        {% block sw_category_tree_field_input_results_search_results_item_endpoint_icon %}
                        <mt-icon
                            name="regular-circle-xxs"
                            size="18"
                        />
                        {% endblock %}
                    </div>
                    {% endblock %}

                    {% block sw_sales_channel_product_assignment_categories_search_results_item_name %}
                    <span class="sw-sales-channel-product-assignment-categories__search-results-name">
                        {% block sw_category_tree_field_input_results_search_results_item_name_highlight %}
                        <sw-highlight-text
                            :search-term="searchTerm"
                            :text="getBreadcrumb(item)"
                        />
                        {% endblock %}
                    </span>
                    {% endblock %}
                </li>
                {% endblock %}
            </ul>
            {% endblock %}

            {% block sw_sales_channel_product_assignment_categories_search_results_empty %}
            <sw-empty-state
                v-else
                :show-description="false"
                :absolute="false"
                :title="$tc('sw-sales-channel.detail.productAssignmentModal.categories.emptySearchResults')"
                :icon="'regular-products'"
                class="sw-sales-channel-product-assignment-categories__empty-state"
            />
            {% endblock %}
            {% endblock %}
        </div>
    </mt-card>
    {% endblock %}
</div>
{% endblock %}
